<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch } from 'vue';

let person = ref({
  name: "张三",
  age: 20
})

function changeName() {
  person.value.name = 'zhangsan'
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = {
    name: '里斯',
    age: 90
  }
}
// 监视的是对象的地址值，若想监视对象内部的属性的变换，需要开启深度监视
watch(person, (newValue, oldValue) => {
  console.log('person改变了',newValue,oldValue)
}, { deep: true })

</script>

<style>
.person {
  width: 100%;
  background-color: skyblue;
}
</style>